<template>
  <div>
    <a-button type="primary" @click="showModal"> 添加管理员 </a-button>
    <div id="userlist">
      <a-card class="listitem" v-for="(item, index) in userdata" :key="index" hoverable style="width: 300px">
        <!-- <img slot="cover" alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" /> -->
        <template slot="actions" class="ant-card-actions">
          <a-popconfirm title="确定删除该管理员吗？" ok-text="Yes" cancel-text="No" @confirm="deleteUser(item)">
            <a-icon key="delete" type="delete" />
          </a-popconfirm>
          <a-icon key="edit" type="edit" @click="toedit(item)" />
        </template>
        <a-card-meta :title="item.adminsRealname" :description="item.adminsPower == 0 ? '超级管理员' : '普通管理员'">
          <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        </a-card-meta>
      </a-card>
    </div>
    <a-modal title="Title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleOk">
        <a-form-item label="用户名">
          <a-input
            v-decorator="[
              'adminsName',
              { initialValue: checkedItem.adminsName },
              { rules: [{ required: true, message: '请输入用户名!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="密码">
          <a-input-password
            type="password"
            v-decorator="[
              'adminsPasswd',
              { initialValue: checkedItem.adminsPasswd },
              { rules: [{ required: true, message: '请输入密码!' }] },
            ]"
          >
          </a-input-password>
        </a-form-item>
        <a-form-item label="真实姓名">
          <a-input
            v-decorator="[
              'adminsRealname',
              { initialValue: checkedItem.adminsRealname },
              { rules: [{ required: true, message: '请输入真实姓名!' }] },
            ]"
           
          />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input
            v-decorator="[
              'adminsPhone',
              { initialValue: checkedItem.adminsPhone },
              { rules: [{ required: true, message: '请输入手机号!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="管理权限">
          <a-select
            v-decorator="[
              'adminsPower',
              { initialValue: '1' },
              { rules: [{ required: true, message: 'Please select your adminsPower!' }] },
            ]"
            placeholder="选择权限"
            disabled
          >
            <a-select-option value="0"> 超级管理员 </a-select-option>
            <a-select-option value="1"> 普通管理员 </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { queryAllAdmin, addAdmin, deleteAdmin, modifyAdmin } from '@/api/user'
export default {
  data() {
    return {
      userdata: [],
      checkedItem: {},
      visible: false,
      confirmLoading: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },
  methods: {
    init() {
      let params = {
        adminRealName: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.userdata = []
      queryAllAdmin({ ...params })
        .then((res) => {
          res.data.list.map((item) => {
            if (item.adminsPower == 1) {
              this.userdata.push(item)
            }
          })
          this.form.resetFields()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.confirmLoading = true
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          if (JSON.stringify(this.checkedItem) === '{}') {
            addAdmin({ ...values })
              .then((res) => {
                if (res.code == 900) {
                  this.$message.info(res.message)
                  this.confirmLoading = false
                } else {
                  this.init()
                  this.visible = false
                  this.confirmLoading = false
                }
              })
              .catch((err) => {
                console.log(err)
              })
            console.log(2222)
          } else {
            modifyAdmin({ ...values })
              .then((res) => {
                this.init()
                console.log(res)
                this.visible = false
                this.confirmLoading = false
              })
              .catch((err) => {
                console.log(err)
              })
            console.log({ ...this.checkedItem })
          }
        }
      })
    },
    handleCancel(e) {
      this.visible = false
      this.checkedItem = {}
    },
    // 修改管理员信息
    toedit(item) {
      this.checkedItem = item
      this.visible = true
    },
    // 删除管理员
    deleteUser(item) {
      deleteAdmin({ id: item.id })
        .then((res) => {
          this.init()
          this.$message.success('删除成功')
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  created() {
    this.init()
  },
}
</script>

<style>
#userlist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  background: white;
  padding: 15px;
}
#userlist .listitem {
  margin-bottom: 10px;
  margin-right: 40px;
}
</style>
